import Taro, { Component } from '@tarojs/taro'
import { View, Text, Textarea, Form, Button } from '@tarojs/components'
import PropTypes from 'prop-types'

import './curtainTextarea.scss'

/**
 * @description 自定义浮动Input输入（仿头条）
 * @author huangkh
 */
class CurtainTextarea extends Component {

    constructor(props){
        super(props)
    }

    render() {
        const { tipShow,title,limit,content,note,onInput,onSubmit,onCancel } = this.props
        return (
            <Form onSubmit={onSubmit} onReset={onCancel} >
                <View className={tipShow ? 'floatinput-container' : 'h'} >
                    <View className='floatinput-bg'></View>
                    <View className='floatinput-content'>
                        <View className='floatinput-title'>
                            <Text>{title}</Text>
                        </View>
                        <View className='floatinput-input'>
                            <View className='floatinput-inputinner'> 
                                <Textarea showConfirmBar autoFocus className='floatinput-ta' onInput={onInput} name='content' maxlength={limit} value={content} />
                                <View className='floatinput-limit'><Text>限{limit }字</Text></View>
                            </View>
                        </View>
                        <View className='floatinput-ops'>
                            <View className='floatinput-note'><Text>{note}</Text></View>
                            <View className='floatinput-btns'>
                                <Button className='floatinput-btn' formType='reset'>取消</Button>
                                <Button className='floatinput-btn' formType='submit'>确定</Button>
                            </View>
                        </View>
                    </View>
                </View>
            </Form>
        )
    }
}

CurtainTextarea.propTypes = {
    tipShow : PropTypes.bool.isRequired,
    title : PropTypes.string.isRequired,
    limit : PropTypes.number,
    content : PropTypes.string,
    note : PropTypes.string,
    onInput : PropTypes.func,
    onCancel : PropTypes.func,
    onSubmit : PropTypes.func
}

CurtainTextarea.defaultProps = {
    tipShow : false,
    title : '',
    limit : '',
    content : '',
    note : '',
    onInput : ()=>{},
    onCancel : ()=>{},
    onSubmit : ()=>{}
}

export default CurtainTextarea